<template>
  <view class="login-container">
    <!-- Logo区域 -->
    <view class="logo">
      <image src="/static/images/RJGC.jpeg" mode="aspectFit" />
    </view>

    <!-- 登录表单 -->
    <form>
      <view class="input-group">
        <view class="country-code">
          <image class="flag-icon" src="/static/images/photo.svg" mode="aspectFit" />
          <text class="code-text">+86</text>
          <uni-icons type="down" size="15"></uni-icons>
        </view>
        <input
          v-model="phone"
          type="number"
          placeholder="请输入手机号"
          class="phone-input"
        />
      </view>

     <!-- 验证码输入 -->
     <view class="input-group code-group">
       <input
         v-model="code"
         type="number"
         placeholder="请输入验证码"
         class="code-input"
       />
       <button
         class="get-code-btn"
         :class="{ disabled: countdown > 0 }"
         :disabled="isDisabled"
         @click="getVerifyCode"
       >
         <text v-if="countdown === 0">获取验证码</text>
         <text v-else>{{ countdown }}s后重试</text>
       </button>
     </view>
	<!-- {{agree}} -->
      <!-- 协议勾选 -->
    <!-- <label class="agreement">
        <checkbox v-model="agree"/>
        <text>同意服务协议和隐私协议</text>
      </label> -->

      <!-- 合并后的登录/注册按钮 -->
      <button form-type="submit" class="login-btn" @click="onLogin">登录/注册</button>
    </form>

    <!-- 其他登录方式 -->
    <view class="other-login">
      <view class="divider">
        <!-- <view class="line"></view> -->
        <!-- <text class="text">其他登录方式</text> -->
        <!-- <view class="line"></view> -->
      </view>

    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import { getSendCode,postLoginByCode }  from "@/api/common.js";

onLoad(() => {
  getSendCode({}).then((res)=>{
	  if(res.code === 200) {
		  console.log(res)
	  }
  })
})

const phone = ref('')
const code = ref('')
const agree = ref(false)
const countdown = ref(0)
const isNewUser = ref(false)
const isDisabled = ref(false)


const getVerifyCode = async () => {
 
  if (!phone.value) {
    uni.showToast({ title: '请输入手机号', icon: 'none' })
    return
  }
  if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(phone.value)) {
    uni.showToast({ title: '请输入正确手机号', icon: 'none' })
    return
  }
   isDisabled.value = true;
  const userExists = await getSendCode(Number(phone.value))
  console.log(userExists,'userExistsuserExists');
  isNewUser.value = !userExists

  countdown.value = 60
  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value == 0) {
      clearInterval(timer);
      isDisabled.value = false;
    };
  }, 1000)
  
}
const onLogin = () =>{
  	// 在onLogin里面需要拿到登录的手机号验证码 ，把参数传给handleLogin函数
	if(phone.value == ''){
		uni.showToast({
			title:'手机号不能为空',
			icon:'none'
		})
		return
	}
  	
	if(code.value == ''){
		uni.showToast({
			title:'验证码不能为空',
			icon:'none'
		})
		return
	}
	
	// if(!agree.value){
	// 	uni.showToast({
	// 		title:'请查看服务协议和隐私协议并同意',
	// 		icon:'none'
	// 	})
	// 	return
	// }
  	handleLogin(phone.value,code.value)
  }
  
const handleLogin = (ph,cd) =>{
// 在这里接收手机号验证码，处理登录接口
postLoginByCode({
	phone:ph,code:cd
}).then((res)=>{
	if(res.code == 200){
		uni.setStorageSync('userInfo', res.data)
		uni.switchTab({
			url:'/pages/home/home'
		})
		
	}else{
		uni.showToast({
			title:'手机号或验证码错误',
			icon:'none'
		})
	}
	console.log(res)
})
}





// import { getList } from "@/api/common.js";
// import { WeChatLogin } from '@/api/common.js';
// WeChatLogin (data).then((res)=>{
// 	console.log('成功',res);
// }).catch((err)=>{
// 	console.log('失败',err)
// })

// const test = (num,num2) => {
// 	console.log("这是test log", num)
// 	console.log("这是test log", num2)
// }

// // const test1 = (num) => {
// // 	console.log("这是test1 log", num)
// // }


// onLoad(() => {
// 	test("1111", {
// 		a:1,
// 	})
// 	// test1("这是我传给test1函数的参数---------------------------------------------")
// })
</script>


<style lang="scss">
.login-container {
  height: 100vh;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .logo {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 60rpx;
    
    image {
      width: 100%;
      height: 100%;
    }
  }

  .title {
    font-size: 36rpx;
    color: #333;
    margin-bottom: 60rpx;
  }

  .input-group {
    width: 100%;
    display: flex;
    margin-bottom: 40rpx;
    
    .country-code {
      padding: 0 20rpx;
      background: #f5f5f5;
      border: 1rpx solid #ddd;
      border-right: none;
      border-radius: 8rpx 0 0 8rpx;
      display: flex;
      align-items: center;
      gap: 8rpx;
      
      .flag-icon {
        width: 40rpx; 
        height: 40rpx;
      }
    
      .code-text {
        font-size: 28rpx;
        color: #333;
      }
    }
  }
  .phone-input {
    flex: 1;
    padding: 24rpx;
    border: 1rpx solid #ddd;
    border-radius: 0 8rpx 8rpx 0;
  }
  
  .code-group {
    position: relative;
    display: flex;
    gap: 20rpx;
  
    .code-input {
      flex: 1;
      height: 88rpx;
      padding: 0 32rpx;
      font-size: 28rpx;
      color: #333;
      border: 1rpx solid #ddd;
      border-radius: 12rpx;
      background: #fff;
    }
  
    .get-code-btn {
      width: 220rpx;
      height: 88rpx;
      line-height: 88rpx;
      padding: 0;
      margin: 0;
      font-size: 26rpx;
      color: #7900f2;
      background: #f8f0ff;
      border: 1rpx solid #e5d5ff;
      border-radius: 12rpx;
      transition: all 0.3s;
    }
  }

  .agreement {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 40rpx 0;
    
    checkbox {
      transform: scale(0.8);
    }
    
    text {
      font-size: 28rpx;
      color: #666;
    }
  }

  .login-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background: #7900f2;
    color: white;
    border-radius: 25rpx;
    font-size: 32rpx;
  }

  .signup-link {
    margin: 40rpx 0;
    font-size: 28rpx;
    color: #666;
    
    navigator {
      display: inline;
      color: #007bff;
    }
  }

  .other-login {
    width: 100%;
    margin-top: 80rpx;

    .divider {
      display: flex;
      align-items: center;
      margin: 40rpx 0;

      .line {
        flex: 1;
        height: 1rpx;
        background: #ddd;
      }

      .text {
        padding: 0 20rpx;
        color: #999;
        font-size: 28rpx;
      }
    }

    .weixin-icon {
      width: 48px;
      height: 48px;
      cursor: pointer;
      transition: transform 0.3s;
    }
    .weixin-icon:active {
      transform: scale(0.95);
    }
  }
}
</style>